<template>
  <div class="menu-container">
    <a-dropdown v-model="menuVisible" :trigger="['click']">
      <slot :data="{ menuVisible }"></slot>
      <a-menu
        slot="overlay"
        class="column-data-type-menu"
        :selected-keys="[sourceType, column.semantic || 'null']"
        @click="onClick"
      >
        <a-menu-item disabled class="menu-group-title">数据类型：</a-menu-item>
        <a-menu-item v-for="item in displayMenuItem" :key="item.value">
          <span class="column-type-icon">
            <a-icon-font :type="columnTypeIcon[item.value]" fill="#5d637e" />
          </span>
          {{ item.text }}
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item
          v-if="['decimal', 'int'].includes(column.desc)"
          disabled
          class="menu-group-title"
          >数据格式：
        </a-menu-item>
        <template v-for="item in displayColumnForm">
          <a-sub-menu
            v-if="['decimal', 'int'].includes(column.desc)"
            :key="item.value"
          >
            <span slot="title">
              <span>{{ item.text }}</span>
            </span>
            <a-menu-item disabled class="menu-group-title"
              >保留小数：
            </a-menu-item>
            <a-menu-item v-for="i in 9" :key="i">
              {{ `${i}位` }}
            </a-menu-item>
          </a-sub-menu>
        </template>
        <a-menu-divider v-if="['decimal', 'int'].includes(column.desc)" />
        <a-menu-item disabled class="menu-group-title">语义：</a-menu-item>
        <template v-for="semanticGroup in semanticMenu">
          <a-sub-menu v-if="semanticGroup.haveSub" :key="semanticGroup.name">
            <span slot="title">
              <span class="column-type-icon" style="margin-right: 6px;">
                <a-icon-font :type="semanticGroup.icon" fill="#5d637e" />
              </span>
              <span>{{ semanticGroup.text }}</span>
            </span>
            <!-- 各语义分类下的语义 -->
            <a-menu-item
              v-for="semantic in semanticGroup.detail"
              :key="semantic.value"
            >
              {{ semantic.chineseName }}
            </a-menu-item>
          </a-sub-menu>
          <!-- 无语义 -->
          <a-menu-item v-else :key="semanticGroup.name">
            {{ semanticGroup.text }}
          </a-menu-item>
        </template>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IColumn } from '@/store/modules/dataview'
import {
  columnTypeMenu,
  semanticMapping,
  columnSemanticMenu, // 修改 transform 使用新的语义二级 menu
  columnTypeForm,
} from '@/components/studio/data/node-edit-panel/column-type-semantic'
import { columnTypeIcon } from '@/components/studio/data/node-edit-panel/column-type-semantic-icon'

@Component
export default class ColumnDataTypeMenu extends Vue {
  @Prop() sourceType!: string
  @Prop() column!: IColumn

  // 数据类型 menu
  private typeMenu = columnTypeMenu // 和数据管理导入数据修改数据类型统一 menu
  private semanticMenu = columnSemanticMenu // 和数据管理导入数据修改数据类型统一 menu
  private columnTypeIcon = columnTypeIcon // 统一数据类型 icon

  private columnForm = columnTypeForm

  // 所有语义类型 'null' 代表无语义
  private get semanticItems() {
    return [
      'null',
      ...this.semanticMenu
        .flatMap((group: any) => group.detail)
        .map((semantic: any) => semantic.value),
    ]
  }

  private menuVisible: boolean = false
  // 语义 中文
  private semanticMapping: any = semanticMapping

  private get displayMenuItem() {
    return this.typeMenu
    // return this.menuItem.filter(item => item.value !== this.sourceType)
  }

  private get displayColumnForm() {
    return this.columnForm
  }

  private onClick(payload: { key: string; keyPath: any }) {
    const { key, keyPath } = payload
    if ([this.sourceType, this.column.semantic || 'null'].includes(key)) {
      return
    }
    if (
      keyPath.length === 2 &&
      ['percentage', 'scientific'].includes(keyPath[1])
    ) {
      this.$emit('format-change', keyPath[1], Number.parseInt(keyPath[0], 10))
    } else if (this.semanticItems.includes(key)) {
      // 改变的是语义
      this.$emit('semantic-change', key)
    } else {
      this.$emit('click', key) // 改变的是数据类型
    }
    this.menuVisible = false
  }

  // private onSemanticClick(payload: any) {
  //   const {key} = payload
  //   this.$emit('semantic-change', key)
  // }
}
</script>

<style lang="less" scoped>
.menu-container {
  display: inline;
}
</style>
<style lang="less">
.column-data-type-menu {
  .ant-dropdown-menu-item {
    line-height: 18px;
    padding-left: 16px;
  }

  .menu-group-title {
    cursor: default;
    padding-left: 10px;
  }
}
</style>
